<template>
	<footer>
		<div class="contact">
			<p class="logo">LOGO</p>
			<div><p v-for="item in contact">{{ item }}</p></div>
		</div>
		<div class="code">
			<div v-for="item in code">
				<img :src="item.src" alt="" />
				<p>{{ item.text }}</p>
			</div>
		</div> 	
		<div class="copyRight">
			<p v-for="item in copyRight">{{ item }}</p>
			<div class="icon">
				<a href="javascript:;" @click="open" target="_blank"><img v-for="item in bom_icon" :src="item.src" :alt="item.alt" /></a>
			</div>
			<transition name="fade">
				<div class="WX" v-if="wx" @click="wx = !wx">
					<span>扫码查看</span>
					<img :src="WX" alt="" />
					<icon type="cancel" class="cancel"  :title="'关闭'"></icon>
				</div>
			</transition>
			<div class="bomTab" @click="bomIcon">
				<a href="javascript:;" v-for="item in bomTab" :title="item.title">
					<img :src="item.src" :alt="item.title" />
					<p>{{ item.text }}</p>
				</a>
			</div>
		</div>
	</footer>
</template>

<script>
	import wx from '../../assets/WX.jpg'
	import qq from '../../assets/QQ.jpg'
	import bom_icon from '../../assets/bom_icon.jpg'
	import bom_icon2 from '../../assets/bom_icon2.jpg'
	import bom_icon3 from '../../assets/bom_icon3.jpg'
	import bom_icon4 from '../../assets/bom_icon4.jpg'
	import bomTab1 from '../../assets/bomTab.jpg'
	import bomTab2 from '../../assets/bomTab2.jpg'
	import bomTab3 from '../../assets/bomTab3.jpg'
	
	import { Icon } from 'vux'
	export default {
		components : {
			Icon
		},
		data (){
			return {
				contact : [
					"电话 ： 1580000000x   188000000x",
					"邮箱 ： 41000000x@qq.com",
					"办公 ： 广州某某镇某某村xx号",
					"公司 ： 广州某某开发区木偶某大街xx号x层"
				],
				WX : wx,
				wx : false,
				code : [
					{
						src : wx,
						text : '微信扫码联系我们'
					},
					{
						src : qq,
						text : '点击QQ在线联系我们'
					}
				],
				copyRight : [
					'版权所有 © 2016 广州某某文化传播有限公司',
					'保留所有权利'
				],
				bom_icon : [
					{src : bom_icon, alt : 'QQ'},
					{src : bom_icon2, alt : 'WX'},
					{src : bom_icon3, alt : 'WB'},
					{src : bom_icon4, alt : 'KJ'}
				],
				bomTab : [
					{src : bomTab1, text : '电话咨询', title : '电话咨询'},
					{src : bomTab2, text : 'QQ咨询', title : 'QQ咨询'},
					{src : bomTab3, text : '返回顶部', title : '返回顶部'}
				]
			}
		},
		methods : {		
			open (ev){
				
				if(ev.target.alt == 'QQ'){
					window.open ('http://connect.qq.com/widget/shareqq/index.html?url=http://192.168.1.219:8022/&title= 广州某某文化传播有限公司','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}else if(ev.target.alt == 'WB'){
					window.open ('http://service.weibo.com/share/share.php?url=http://128.168.1.219:8022/&title= 广州某某文化传播有限公司','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}else if(ev.target.alt == 'KJ'){
					window.open ('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://128.168.1.219:8022/&title= 广州某某文化传播有限公司','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}else if(ev.target.alt == 'WX'){
					this.wx = true
				}
			},
			bomIcon (ev){
				if(ev.target.title == '电话咨询' || ev.target.innerHTML == '电话咨询' || ev.target.alt == '电话咨询'){
					console.log(ev.target);
				}else if(ev.target.title == 'QQ咨询' || ev.target.innerHTML == 'QQ咨询' || ev.target.alt == 'QQ咨询'){
					console.log(ev.target);
				}else if(ev.target.title == '返回顶部' || ev.target.innerHTML == '返回顶部' || ev.target.alt == '返回顶部'){
					
					if(document.documentElement.scrollTop){
						document.documentElement.scrollTop = "0";				
					}else{
						document.body.scrollTop = "0";		
					}
				}
			}
		}
	}
</script>

<style>
	footer {
		background: rgb(38,38,38); overflow: hidden; color: #A9A9A9; padding: 0.2rem 0.15rem; clear: both; padding-bottom: 0.56rem;
	}
	footer .contact,footer .code{
		border-bottom: 0.01rem solid rgb(65,65,65); padding: 0.25rem 0;
	}
	footer .contact .logo{
		font-size: 0.18rem; line-height: 0.4rem;
	}
	footer .contact p{
		line-height: 0.22rem;
	}
	
	footer .code{
		overflow: hidden; padding-left: 0.1rem;
	}
	footer .code div{
		width:auto; text-align: center; float: left;
	}
	footer .code div:nth-of-type(2){
		margin-left: 0.45rem;
	}
	footer .code img{
		width: 0.8rem; height: 0.8rem; 
	}
	footer .code p{
		color: #fff; line-height: 0.22rem;
	}
	
	footer .copyRight{
		padding-top: 0.1rem; line-height: 0.25rem;
	}
	footer .copyRight .icon{
		float: right; margin-right: 0.1rem;
	}
	footer .copyRight .icon img{
		width: 0.18rem; height: 0.18rem; margin-left: 0.05rem;
	}
	footer .WX{
		padding: 0.17rem; border-radius: 0.06rem; padding-top: 0.35rem; position: fixed; z-index: 99; background:#fff; top: 15%; left: 17%; -webkit-box-shadow: 0.01rem -0.01rem 0.01rem 0.03rem rgba(12,22,15,0.4);box-shadow: 0.01rem -0.01rem 0.01rem 0.03rem rgba(12,22,15,0.4);
	}
	footer .WX img{
		width:1.8rem; height: 1.8rem;
	}
	footer .WX .cancel{
		position: absolute; top: 0.05rem; right: 0.02rem; color: #000; font-size: 0.2rem !important;
	}
	footer .WX span{
		color: #333; font-size: 0.12rem; position: absolute; top: 0.05rem; left: 0.05rem; font-weight: bold;
	}
	
	footer .bomTab{
		width:100%; height: 0.56rem; background: #000; position: fixed; bottom: 0; left: 0;
	}
	footer .bomTab a{
		float: left; text-align: center; width: 33.3333%; padding-top: 0.06rem;
	}
	footer .bomTab a img{
		vertical-align: middle; width: 0.26rem; height: 0.27rem;
	}
	footer .bomTab p{
		color: #fff; 
	}
	
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s
	}
	.fade-enter, .fade-leave-to {
	  opacity: 0
	}
</style>